import React from "react";
import { Breadcrumb, Button, Card, Form, Input } from "antd";
import { useParams } from "react-router-dom";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import './index.less';
import TextArea from "antd/es/input/TextArea";

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};

const ProductForm: React.FC = () => {
  const { productName = '' } = useParams();
  const [form] = Form.useForm();
  const breadCrumbItems = [
    {
      title: 'Product',
      href: '/#/products'
    },
    {
      title: productName,
    }
  ]
  return (
    <div id="product-form-container">
      <div style={{
        width: '100%',
        margin: '12px 0'
      }}>
        <Breadcrumb items={breadCrumbItems} />
      </div>
      <Card
        style={{
          width: '100%',
        }}
      >
        <Form
          form={form}
          {...formItemLayout}
        >
          <Form.Item
            name="title"
            label="标题"
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="title"
            label="段落"
          >
            <TextArea />
          </Form.Item>
          <Form.List
            name="content"
          >
            {(fields, { add, remove }, { errors }) => {
              return fields.map((field, index) => (
                <>
                  <Form.Item
                    label={index === 0 ? 'Passengers' : ''}
                    required={false}
                    key={field.key}
                  >
                    <Form.Item
                      {...field}
                      validateTrigger={['onChange', 'onBlur']}
                      rules={[
                        {
                          required: true,
                          whitespace: true,
                          message: "Please input passenger's name or delete this field.",
                        },
                      ]}
                      noStyle
                    >
                      <Input placeholder="passenger name" style={{ width: '60%' }} />
                    </Form.Item>
                    {fields.length > 1 ? (
                      <MinusCircleOutlined
                        className="dynamic-delete-button"
                        onClick={() => remove(field.name)}
                      />
                    ) : null}
                  </Form.Item>
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => add()}
                      style={{ width: '60%' }}
                      icon={<PlusOutlined />}
                    >
                      Add field
                    </Button>
                  </Form.Item>
                </>
              ))
            }}
          </Form.List>
          <Form.Item
            wrapperCol={{
              span: 24,
              offset: 4
            }}
          >
            <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default ProductForm;